<template>
    <div>
        <el-dialog v-model="innerVisible" :width="isMobile ? '1150' : '70%'" title="薪资状态查询" append-to-body
            :close-on-click-modal="false">
            <div class="blue" style="width: 100%; display: flex; justify-content: flex-end">
                <el-button type="primary" @click="downfilereason" link>领薪失败原因及解决方法?</el-button>
            </div>
            <div class="flex">
                <filterComponent style="flex: 1" v-model:filter-data="filterData" hideHead />
                <el-button type="primary" :icon="Search" round @click="handleSearch">搜索</el-button>
                <el-button type="" text @click="clearSearch"> <img src="../../assets/image/容器.png" class="w-16px mr-6px"
                        alt="" />清除条件</el-button>
            </div>
            <tableComponent class="set-height" height="500" :noPagination="false" v-model:page-info="pageInfo"
                :table-header="tableHeader" :table-data="tableData" @pageChange="handleSearch">
            </tableComponent>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import tableComponent from '@/components/tableComponent/index.vue'
import filterComponent from '@/components/filterComponent/index.vue'
import { getqueryfailreasonapi } from '../../api/operationHomepage'
import {
    Search,
} from '@element-plus/icons-vue'
const isMobile = ref((window as any).isMobile)

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})
const downfilereason = () => {
    window.location.href =
        'https://bullet001.oss-cn-shanghai.aliyuncs.com/file/getSalaryFialReason.xlsx'
}
const getqueryfailreason = () => {
    getqueryfailreasonapi({
        idCardNo: filterData.value.list.idCardNo.value,
        phone: filterData.value.list.phone.value,
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize,
        queryPayDate: filterData.value.list.queryPayDate.value
    }).then((res: any) => {
        console.log(res, 'klsf8hs8gh')
        tableData.value = res.rows
        pageInfo.value.total = res.total
    })
}
const tableData = ref<any>([])
const tableHeader = ref([
    {
        label: '职工姓名',
        prop: 'userName',
        fixed: 'left'
    },
    {
        label: '手机号',
        prop: 'phone'
    },
    {
        label: '身份证',
        prop: 'idCardNo'
    },
    {
        label: '发薪时间',
        prop: 'payTime'
    },
    {
        label: '领薪时间',
        prop: 'getSalaryTime'
    },
    {
        label: '所属项目',
        prop: 'projectName'
    },
    {
        label: '所属企业',
        prop: 'serveCompanyName'
    },
    {
        label: '领薪金额',
        prop: 'paymentAmount'
    },
    {
        label: '操作状态',
        prop: 'status',
        map: {
            0: '待领薪',
            1: '已领薪',
            2: '停止发薪',
            3: '进行中',
            4: '领薪失败'
        }
    },
    {
        label: '原因',
        prop: 'failReasonMsg'
    }
])
const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0,
})
const clearSearch = async () => {
    filterData.value.list.queryPayDate.value = ''
    filterData.value.list.phone.value = ''
    filterData.value.list.idCardNo.value = ''
    await getqueryfailreason()
}
const handleSearch = async () => {
    await getqueryfailreason()
}
const filterData = ref({
    list: {
        idCardNo: {
            name: '员工身份证',
            prop: 'idCardNo',
            value: '',
            placeholder: '请输入员工身份证',
            type: 'input',
            inputType: 'text'
        },
        phone: {
            name: '手机号',
            prop: 'phone',
            value: '',
            placeholder: '请输入手机号',
            type: 'input',
            inputType: 'text'
        },
        queryPayDate: {
            name: '发薪时间',
            prop: 'queryPayDate',
            value: '',
            placeholder: '请选择发薪时间',
            type: 'date',
            dateType: 'date',
            format: 'yyyy-MM-dd',
        }
    }
})

const innerVisible = ref(false)
const emits = defineEmits(['update:show'])
watch(
    () => props.show,
    (newval) => {
        innerVisible.value = newval
        tableData.value = []
        filterData.value.list.idCardNo.value = ''
        filterData.value.list.phone.value = ''
    }
)
watch(innerVisible, (newval) => {
    emits('update:show', newval)
})
</script>

<style scoped lang="scss">
.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blue {
    cursor: pointer;
    color: #3e5ff5;
}
</style>
